<template>
	<uni-section title="内容输入" type="line">
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="form" label-position="top" :rules="postRules" :modelValue="formData">
				<uni-forms-item label="社团名称" name="name" required>
					<uni-easyinput v-model="formData.name" placeholder="请输入社团名称" />
				</uni-forms-item>
				<uni-forms-item label="描述" name="description" required>
					<uni-easyinput type="textarea" autoHeight v-model.lazy="formData.description" placeholder="请输入内容"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="社团头像" name="club_avatar" required>
					<uni-file-picker
						@select="imageSelect"
						:auto-upload="false"
						limit="1"
						title="最多选择1张图片"
					></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view> 
			<button type="primary" @click="create">创建</button>
		</view>
	</uni-section>
	<!-- 删除 -->
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog
			type="error"
			cancelText="取消"
			confirmText="确定"
			title="提示"
			content="确定创建这个社团吗"
			@confirm="dialogConfirm"
		></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue'
import useLoginStore from '@/store/login.js'
import useClubStore from '@/store/club.js'
import { BASE_URL } from '@/service/config.js'
import { reactive, ref } from 'vue'


const loginStore = useLoginStore()
const clubStore = useClubStore()
const formData = reactive({
	name: '',
	description: '',
	club_avatar: '',
	leaderName: loginStore.userInfo.name
})
const form = ref('')
const postRules = {
	name: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入标题信息~'
			}
		
		]
	},
	// 对email字段进行必填验证
	description: {
		rules: [
			{
				required: true,
				errorMessage: '必须输入内容~'
			}
		]
	},
	club_avatar: {
		rules: [
			{
				required: true,
				errorMessage: '必须上传封面~'
			}
		]
	}
}




function imageSelect(e) {
	const tempFilePaths = e.tempFilePaths //e是获取的图片源
	uni.uploadFile({
		url: `${BASE_URL}/file/post/picture`, //上传图片的后端接口
		header: {
			Authorization: loginStore.token
		},
		filePath: tempFilePaths[0],
		name: 'post-picture',
		success: (res) => {
			const obj = JSON.parse(res.data)
			formData.club_avatar = obj.data.url
		}
	})
}



// 创建社团
const alertDialog = ref('')
async function dialogConfirm() {
	clubStore.newClubDataAction(formData)
	uni.showToast({
		title: '创建社团成功',
		icon: 'success'
	})
	uni.switchTab({
		url:'/pages/profile/profile'
	})
}

function create() {
	form.value
		.validate()
		.then(async (res) => {
			try {
					alertDialog.value.open()
			} catch (err) {
				uni.showToast({
					title: err.message,
					icon: 'error'
				})
			}
		})
		.catch((err) => {
			uni.showToast({
				title: '请输入信息',
				icon: 'error'
			})
		})
}
</script>

<style>
.example {
	padding: 15px;
	background-color: #fff;
}

.segmented-control {
	margin-bottom: 15px;
}

.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

.form-item {
	display: flex;
	align-items: center;
}

.button {
	display: flex;
	align-items: center;
	height: 35px;
	margin-left: 10px;
}
</style>